<template>
  <div>
    <!-- 留言 -->
    <ul class="message">
        <li>
            <input type="text" id="lyName" class="txt" name="name" v-model="username" placeholder="请输入姓名"></li>
        <li>
            <input type="tel" id="lyTel" class="txt lyTel" name="tel" v-model="userphone" placeholder="请输入联系电话"></li>
        <li>
            <textarea id="lyArea" class="txt txt2 txtNr" name="msg" v-model="usermessage" placeholder="请输入留言内容"></textarea>
        </li>
        <x-button :gradients="['#FF2719', '#FF61AD']" @click.native="messageSubmit">提交</x-button>
          
    </ul>
  </div>
</template>
<script type="application/ecmascript">

import {XButton} from 'vux'
export default {
  components: {
    XButton
  },
  data(){
    return{
      username:'',
      userphone:'',
      usermessage:'',
    }
  },
  methods:{
    messageSubmit(){
      let username = this.username
      let userphone = this.userphone
      let usermessage = this.usermessage
      this.$store.dispatch('moduleEdit/sendEmail',{username,userphone,usermessage})
    }
  },
  name: 'LeaveMessage',
}
</script>
<style lang="less" scoped>
.message{ 
  padding-top:10px; 
  margin:0 10px; 
  overflow:hidden;
  li{ 
    width:100%; 
    float:left; 
    padding-bottom:0px; 
    position:relative; 
    overflow:hidden;
    text-align: center;
    input{
      margin-bottom: 10px;
    }
    input[type=button]{ 
      background: #ff4e49;
      border-bottom: 2px solid #bf1515;
      font-size: 18px;
      color: #ffffff;
      font-weight: bold;
    }
  }
  span{ 
    height:26px; 
    line-height:26px; 
    color:#ff4e49; 
    position:absolute; 
    right:1%; 
    top:7px;
  }
}
.txt{ 
  width:100%; 
  height:40px; 
  line-height:40px; 
  background:#ffffff; 
  padding:0 5px; 
  font-size:16px; 
  color:#b1b1b1; 
  border:1px solid #ffffff; 
  border-radius:5px; 
  font-family:microsoft yahei; 
  -webkit-appearance:none; 
  box-sizing:border-box; 
  overflow:hidden
}
.txt:focus{ border:1px solid #fc4837;}
.abouttext{ 
  line-height:22px; 
  color:#fff; 
  margin:10px 0px 0; 
  overflow:hidden
}
</style>